<template>
  <div
    class="zhxbtn pointer"
    :class="{ act: active }"
    @mousedown="active = true"
    @mouseup="active = false"
    @mouseleave="active = false"
    @mouseout="active = false"
    @click="zhxclick"
  >
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: "zhxbtn",
  data() {
    return {
      active: false
    };
  },
  components: {},
  created() {},
  methods: {
    zhxclick() {
      this.$emit("zhxclick");
    }
  }
};
</script>
<style lang="scss" scoped>
.zhxbtn {
  -webkit-user-select: none;
  user-select: none;
  display: inline-block;
  border-radius: 0.04rem;
  border: 0.01rem solid #fd0000;
  color: #fd0000;
  padding: 0 0.4rem;
  line-height: 0.4rem;
  overflow: hidden;
  &:hover {
    background: #0f0;
    position: relative;
  }
  &:hover::after {
    content: " ";
    background: yellow;
    position: absolute;
    width: 2rem;
    height: 2rem;
    top: calc(50% - 1rem);
    left: calc(50% - 1rem);
    opacity: 0;
    margin: auto;
    border-radius: 50%;
    transform: scale(1);
    transition: all 0.75s ease-in-out;
    // background: #f00;
  }
  &.act::after {
    // background: #00f;
    transform: scale(0);
    opacity: 1;
    transition: 0s;
  }
}
</style>